<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机号登录/注册</title>
    
</head>
<body>
    <!-- login页面 -->
    <div class="app-login pd20">
        <!-- 登录界面背景视频 -->
        <div class="login-bg">
            <video src="../video/bg.mp4" muted autoplay loop></video>

            <!-- 密码登录 -->
        <div class="login-pwd dpflex pt20">
            <a href="./register.html"><p class="pwd-text">密码登录</p></a>
        </div>
        <!-- 手机号注册登录 -->
        <div class="login-phone pt40">
            <p class="phone-text">手机号登录/注册</p>
            <p class="phone-tips">快速找到好友,一站式记录你的运动</p>
        </div>
        <!-- 登录注册表单 -->
        <div class="login-form dpflex fdcolumn mt20">
            <p class="first">
                <select class="select-list">
                    <option>+86</option>
                    <option>+85</option>
                    <option>+83</option>
                </select>
                <span class="iconfont icon-sanjiaoxing"></span>
                <input id="account" class="phone flex1" type="text" placeholder="请输入手机号码">
            </p>
            <p class="dpflex second">
                <input id="captcha" class="message pl18" type="text" placeholder="请输入验证码">
                <canvas  class="msg-text" width="240" height="90" id="captcha1"></canvas>
            </p>
            <p>
                <input id="password" class="pwd pl18" type="password" placeholder="请输入密码">
            </p>
            <p>
                <input id="checkPassword" class="pwdagain pl18" type="password" placeholder="请再次确认密码">
            </p>
            <p>
                <button id="submitBtn" class="btn">注册账号</button>
            </p>
        </div>
        <!-- 微信注册 -->
        <div class="login-wechat dpflex">
            <span class="iconfont icon-wecheat"></span>
            <span class="wechat">微信注册</span>
        </div>

        <!-- 错误提醒 -->
        <p id="erronMsg" class="erron-msg"></p>
        <!-- 底部slogn -->
        <div class="login-slogn">
            <a href="./advert.html"><p>- HOLD ON -</p></a>
        </div>
        </div>
        
    </div>

    
</body>
</html>